<template>
  <div class="list" ref="wrapper">
    <div>
      <div class="area">
        <div class="title border-topbottom">当前城市</div>
        <div class="btnList">
          <div class="btnwapper">
            <button class="btn">北京</button>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbottom" v-if="hotCities.length">
          热门城市
        </div>
        <div class="btnList">
          <div class="btnwapper" v-for="city of hotCities" :key="city.id">
            <button class="btn">{{ city.name }}</button>
          </div>
        </div>
      </div>
      <div class="area" v-for="(item, key) of cities" :key="key" :ref="key">
        <div class="title border-topbottom">{{ key }}</div>
        <div class="itemlist">
          <div class="cityname" v-for="city of item" :key="city.id">
            {{ city.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  name: "cityList",
  props: {
    cities: Object,
    hotCities: Array,
    letter: String,
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      observeDOM: true,
      // 就是说 observe-dom 这个属性会在 better-scroll
      // 内部帮我们监听 content 的高度变化，自动的帮我们
      // 调用内部的 refresh，再也不用为了图片内容早better-scroll对象
      // 创建的时候没加载出来导致不能滚动而到处的refresh了
    });
    // console.log(this.cities);
  },
  watch: {
    letter() {
      if (this.letter) {
        // 当 ref 和 v-for 一起使用的时候，你得到的 this.$refs.取得名字 将会是一个包含了对应数据源的这些子组件的数组。
        // 当动态绑定ref（:ref="`content${index}`"）时，要用this.$refs[`content${index}`][0]获取，或者:ref=‘key’ this.$refs[key的值，这个值必须是个string][0];

        const element = this.$refs[this.letter][0]

        // console.log(element) 
        // 此时element是一个数组，所以要用下标 
        this.scroll.scrollToElement(element);
      }
    },

  },
};
</script>

<style  lang="stylus" scoped>
.list {
  overflow: hidden;
  position: absolute;
  top: 1.52rem;
  bottom: 0;
  left: 0;
  right: 0;

  // background: red;
  .title {
    line-height: 0.44rem;
    // height: .44rem
    background: #eee;
    padding-left: 0.2rem;
    color: #666;
    font-size: 0.26rem;
    border: 0.02rem #ccc solid;
  }

  .btnList {
    padding: 0.1rem 0.6rem 0.1rem 0.1rem;
    overflow: hidden;

    .btnwapper {
      float: left;
      width: 20%;
      text-align: center;
      border: 0.02rem #ccc solid;
      margin: 0.1rem;
      padding: 0.1rem 0;

      .btn {
        background: #fff;
      }
    }
  }

  .itemlist {
    .cityname {
      line-height: 0.76rem;
      color: #666;
      padding-left: 0.2rem;
      border-bottom: 0.002rem #ccc solid;
    }
  }
}
</style>